<template>
  <d2-container>
    <el-tabs v-model="activeTab" @tab-click="handleTabSwitch">
      <el-tab-pane label="用户详情" name="1">
        <el-row :gutter="20">
          <el-col :lg="12">
            <el-form
              ref="detailForm"
              :model="detailForm"
              :rules="rules"
              label-width="100px"
            >
              <el-form-item label="头像和二维码">
                <img
                  style="width: 100px; height: 100px"
                  :src="detailForm.avatar"
                />
                <!-- <img
                  style="width: 100px; height: 100px; margin-left: 10px"
                  :src="
                    'http://111.229.255.36:6003/api/image/QR?data=' +
                    detailForm.member[0].code
                  "
                /> -->
              </el-form-item>
              <!-- <el-form-item label="姓名">
                                <el-input placeholder="姓名" v-model="detailForm.name"></el-input>
              </el-form-item>-->
              <el-form-item label="用户姓名">
                <el-input
                  placeholder="用户姓名"
                  v-model="detailForm.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input
                  placeholder="昵称"
                  v-model="detailForm.nickName"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="性别">
                                <el-radio disabled v-model="detailForm.gender" :label="1">男</el-radio>
                                <el-radio disabled v-model="detailForm.gender" :label="0">女</el-radio>
              </el-form-item>-->
              <el-form-item label="会员等级">
                <el-radio v-model="detailForm.vip" :label="1">VIP会员</el-radio>
                <el-radio v-model="detailForm.vip" :label="0"
                  >普通会员</el-radio
                >
              </el-form-item>
              <el-form-item label="手机">
                <el-input placeholder v-model="detailForm.cellphone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input
                  placeholder
                  type="email"
                  v-model="detailForm.email"
                ></el-input>
              </el-form-item>
              <el-form-item label="生日">
                <el-date-picker
                  style="width: 100%"
                  v-model="detailForm.birthday"
                  type="date"
                  placeholder="生日"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="会员等级">
                                <el-select v-model="detailForm.member[0].type" placeholder="会员等级">
                                    <el-option
                                        v-for="item in typeAry"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
              </el-form-item>-->
              <el-form-item label="会员积分">
                <el-input
                  v-if="detailForm.member"
                  placeholder="会员积分"
                  v-model="detailForm.member[0].point"
                ></el-input>
              </el-form-item>
              <el-form-item label="过期积分">
                <el-input
                  v-if="detailForm.userPoint"
                  placeholder
                  disabled
                  v-model="detailForm.userPoint[0].expiredPoint"
                ></el-input>
              </el-form-item>
              <el-form-item label="待审核积分">
                <el-input
                v-if="detailForm.userPoint"
                  placeholder
                  disabled
                  v-model="detailForm.userPoint[0].pendingPoint"
                ></el-input>
              </el-form-item>
              <el-form-item label="小程序访问来源">
                <el-input
                  placeholder
                  disabled
                  v-model="detailForm.wayText"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="用户地址">
                                <el-cascader disabled style="width: 100%"></el-cascader>
              </el-form-item>-->
              <!-- <el-form-item label="浏览门店">
                                <el-input disabled placeholder="浏览门店" v-model="detailForm.nickName"></el-input>
              </el-form-item>-->
              <!-- <el-form-item label="消费金额">
                                <el-input disabled placeholder="消费金额" v-model="detailForm.nickName"></el-input>
              </el-form-item>-->
              <el-form-item>
                <el-button type="primary" @click="submitForm('detailForm')"
                  >确定</el-button
                >
                <el-button @click="resetForm('detailForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="消费记录" name="2">
        <div class="muse_filter_box">
          <el-form ref="filtersForm" :model="form">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item>
                  <el-date-picker
                    type="datetime"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:MM"
                    v-model="form.startDate"
                    placeholder="开始时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-date-picker
                    type="datetime"
                    style="width: 100%"
                    v-model="form.endDate"
                    value-format="yyyy-MM-dd HH:MM"
                    placeholder="结束时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="filterSearch('filtersForm')"
                  >搜索</el-button
                >
                <el-button @click="resetForm('filtersForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="margin-bottom: 10px">
          <!-- <span class="sum_up_label">累计积分: {{totalPoint}}</span>
                    <span class="sum_up_label">可用积分: {{currentPoint}}</span>
          <span class="sum_up_label">到期积分: {{expiredPoint}}</span>-->
          <span class="sum_up_label">累计积分: {{ userTotalPoint }}</span>
          <span class="sum_up_label">可用积分: {{ userCurrentPoint }}</span>
          <span class="sum_up_label">到期积分: {{ userExpiredPoint }}</span>
          <span class="sum_up_label">待审积分: {{ userPendingPoint }}</span>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="member.code" label="会员号" />
          <el-table-column prop="cellphone" label="手机号" />
          <el-table-column prop="updatedAt" label="日期" width="150">
            <template slot-scope="{ row: { updatedAt } }">{{
              updatedAt | date("YYYY-MM-DD HH:mm")
            }}</template>
          </el-table-column>
          <el-table-column prop="store.name" label="消费门店" />
          <el-table-column prop="amount" label="消费金额" />
          <el-table-column prop="earnPoints" label="赠送积分">
            <template slot-scope="{ row: { verify, earnPoints } }"
              >{{ earnPoints }}({{
                verify === 0 ? "待审核" : verify === 1 ? "已通过" : "未通过"
              }})</template
            >
          </el-table-column>
          <el-table-column prop="point" label="使用积分" />
          <el-table-column prop="member.point" label="积分余额" />

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.row)" type="text" size="small"
                >撤销</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="muse_pagination"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paging.page"
          :page-sizes="paging.pageSizeAry"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="兑换券订单列表" name="3">
        <div class="muse_filter_box">
          <el-form ref="filtersForm" :model="form">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item>
                  <el-input placeholder="订单号" v-model="form.id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="filterSearch('filtersForm')"
                  >搜索</el-button
                >
                <el-button @click="resetForm('filtersForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="muse_table_box">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="_id" label="订单id" />
            <el-table-column prop="status" label="订单状态">
              <template slot-scope="scope">
                {{
                  scope.row.status == 0
                    ? "待付款"
                    : scope.row.status == 1
                    ? "已付款"
                    : scope.row.status == 2
                    ? "退款"
                    : scope.row.status == 3
                    ? "退款中"
                    : scope.row.status == 4
                    ? "已发货"
                    : "已退款"
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="products[0].voucher.title"
              label="兑换券名字"
            />
            <el-table-column prop="products[0].amount" label="兑换券数量" />
            <el-table-column prop="cellphone" label="手机号" />
            <el-table-column prop="totalPoint" label="积分总价" />
            <el-table-column label="核销状态">
              <template slot-scope="scope">{{
                scope.row.status == 0
                  ? ""
                  : scope.row.userVoucher && scope.row.userVoucher.status == 1
                  ? "已使用"
                  : "未使用"
              }}</template>
            </el-table-column>
            <el-table-column prop="useDate" label="核销时间">
              <template slot-scope="scope">{{
                scope.row.useDate | date("YYYY-MM-DD HH:mm")
              }}</template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间">
              <template slot-scope="scope">{{
                scope.row.createdAt | date("YYYY-MM-DD HH:mm")
              }}</template>
            </el-table-column>
            <el-table-column prop="staff.cellphone" label="员工号码" />
            <el-table-column prop="staff.store[0].name" label="所在门店" />
          </el-table>
          <el-pagination
            class="muse_pagination"
            :background="true"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="paging.page"
            :page-sizes="paging.pageSizeAry"
            :page-size="paging.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品订单列表" name="4">
        <div class="muse_filter_box">
          <el-form ref="filtersForm" :model="form">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item>
                  <el-input placeholder="订单号" v-model="form.id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="filterSearch('filtersForm')"
                  >搜索</el-button
                >
                <el-button @click="resetForm('filtersForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="muse_table_box">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="_id" label="订单id" />
            <el-table-column prop="status" label="订单状态">
              <template slot-scope="scope">
                {{
                  scope.row.status == 0
                    ? "待付款"
                    : scope.row.status == 1
                    ? "已付款"
                    : scope.row.status == 2
                    ? "退款"
                    : scope.row.status == 3
                    ? "退款中"
                    : scope.row.status == 4
                    ? "已发货"
                    : "已退款"
                }}
                <!-- scope.row.status == 5 ? '撤销' : -->
              </template>
            </el-table-column>
            <!-- <el-table-column prop="total" label="总价（元）"/> -->
            <el-table-column prop="totalPoint" label="积分总价" />
            <el-table-column prop="cellphone" label="手机号" />
            <el-table-column prop="shipDate" label="发货时间">
              <template slot-scope="scope">{{
                scope.row.shipDate | date("YYYY-MM-DD HH:mm")
              }}</template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间">
              <template slot-scope="scope">{{
                scope.row.createdAt | date("YYYY-MM-DD HH:mm")
              }}</template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="muse_pagination"
            :background="true"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="paging.page"
            :page-sizes="paging.pageSizeAry"
            :page-size="paging.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <template v-if="false">
        <el-tab-pane label="用户收藏信息" name="3">
          <div class="muse_filter_box">
            <el-form ref="filtersForm" :model="form">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item>
                    <el-input
                      placeholder="账户"
                      v-model="form.account"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" @click="filterSearch('filtersForm')"
                    >搜索</el-button
                  >
                  <el-button @click="resetFilterForm('filtersForm')"
                    >重置</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="muse_table_box">
            <div class="muse_control_box">
              <el-button @click="deleteSelected">删除选中</el-button>
              <el-button @click="deleteAll">删除全部</el-button>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column fixed type="selection" width="55" />
              <el-table-column prop="account" label="商品名称" />
              <el-table-column prop="account" label="描述" />
              <el-table-column prop="account" label="商品种类" />
              <el-table-column prop="account" label="状态" />
              <el-table-column prop="account" label="折扣" />
              <el-table-column prop="account" label="价格" />
              <el-table-column prop="account" label="库存" />
              <el-table-column prop="account" label="创建时间" />
              <el-table-column fixed="right" label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    v-if="false"
                    @click="editRow(scope.row)"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    v-if="false"
                    @click="upOrDown(scope.row)"
                    type="text"
                    size="small"
                    >上线</el-button
                  >
                  <el-button
                    @click="deleteRow(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="muse_pagination"
              :background="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="paging.page"
              :page-sizes="paging.pageSizeAry"
              :page-size="paging.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户购物车" name="4">
          <div class="muse_filter_box">
            <el-form ref="filtersForm" :model="form">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item>
                    <el-input
                      placeholder="账户"
                      v-model="form.account"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" @click="filterSearch('filtersForm')"
                    >搜索</el-button
                  >
                  <el-button @click="resetForm('filtersForm')">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="muse_table_box">
            <div class="muse_control_box">
              <el-button @click="deleteSelected">删除选中</el-button>
              <el-button @click="deleteAll">删除全部</el-button>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column fixed type="selection" width="55" />
              <el-table-column prop="account" label="商品名称" />
              <el-table-column prop="account" label="描述" />
              <el-table-column prop="account" label="商品种类" />
              <el-table-column prop="account" label="状态" />
              <el-table-column prop="account" label="折扣" />
              <el-table-column prop="account" label="价格" />
              <el-table-column prop="account" label="库存" />
              <el-table-column prop="account" label="创建时间" />
              <el-table-column fixed="right" label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    @click="deleteRow(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="muse_pagination"
              :background="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="paging.page"
              :page-sizes="paging.pageSizeAry"
              :page-size="paging.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户地址" name="5"></el-tab-pane>
      </template>
    </el-tabs>
  </d2-container>
</template>

<script>
import tableMixin from "../mixins/tableMixin";
import orderList from "@/views/musePage/order/orderList";
import {
  getOneUser,
  changeOneUser,
  getExpenseHistoryList,
  recallUserExpenseHistory,
  getOrderList,
  getVoucherOrderList,
} from "@/api/admin";
export default {
  name: "userInfo",
  mixins: [tableMixin],
  components: { orderList },
  data() {
    return {
      detailForm: {
        email: "",
      },
      rules: {
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      activeTab: "1",
      // 检索条件
      form: {
        account: "",
        id: "",
      },
      typeAry: [
        { label: "普通会员", value: "普通会员" },
        { label: "VIP会员", value: "VIP会员" },
      ],
      expiredPoint: "",
      totalPoint: "",
      currentPoint: "",
      userTotalPoint: 0,
      userCurrentPoint: 0,
      userExpiredPoint: 0,
      userPendingPoint: 0,

      requestName: "",
    };
  },
  created() {
    this.getOneUser();
  },
  methods: {
    /**
     * @description: 用户详情
     * @param {type}
     * @return:
     */
    async getOneUser() {
      const {
        $route: {
          query: { id },
        },
      } = this;
      const { code, data } = await getOneUser({ id: id });
      this.detailForm = data[0];
    },
    /**
     * @description: 编辑用户详情
     * @param {type}
     * @return:
     */
    async changeOneUser() {
      const params = {
        id: this.$route.query.id,
        cellphone: this.detailForm.cellphone,
        name: this.detailForm.name,
        vip: this.detailForm.vip,
        birthday: this.detailForm.birthday,
        point: this.detailForm.member[0].point,
        email: this.detailForm.email,
      };
      const { code } = await changeOneUser(params);
      if (code === 200) {
        this.$router.push({ name: "userList" });
      }
    },
    /**
     * @description: 表单验证和提交
     * @param {type}
     * @return:
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changeOneUser();
        } else {
          return false;
        }
      });
    },
    /**
     * @description: 表单重置
     * @param {type}
     * @return:
     */
    resetForm() {},
    // ---------------------------------检索相关---------------------------------------
    /**
     * @description: 条件检索
     * @param {type}
     * @return:
     */
    filterSearch() {
      if (["3", "4"].indexOf(this.activeTab) > -1) {
        this.getTableDataByOrder();
      } else if (["2"].indexOf(this.activeTab) > -1) {
        this.getTableData();
      }
    },
    /**
     * @description: 重置条件检索
     * @param {type}
     * @return:
     */
    resetFilterForm() {},

    // ---------------------------------消费记录相关---------------------------------------
    async getTableData(value, type) {
      let params = {
        page:
          type === "page"
            ? value
              ? value
              : this.paging.page
            : this.paging.page,
        pageSize:
          type === "pageSize"
            ? value
              ? value
              : this.paging.pageSize
            : this.paging.pageSize,
      };
      params = Object.assign(
        {},
        params,
        { userId: this.$route.query.id },
        this.form
      );
      const {
        code,
        data: {
          total,
          currentPage,
          data,
          pageSize,
          expiredPoint,
          totalPoint,
          currentPoint,
        },
      } = await getExpenseHistoryList(params);
      this.paging.total = total;
      this.paging.pageSize = pageSize;
      this.paging.page = currentPage;
      this.tableData = data;

      this.expiredPoint = expiredPoint;
      this.totalPoint = totalPoint;
      this.currentPoint = currentPoint;

      (this.userTotalPoint = data[0].userPoint.total),
        (this.userCurrentPoint = data[0].userPoint.current),
        (this.userExpiredPoint = data[0].userPoint.expiredPoint),
        (this.userPendingPoint = data[0].userPoint.pendingPoint);
    },
    // 删除该行
    deleteRow(row) {
      this.wrapConfirm(-1, "要撤销该条消费记录，是否继续？")
        .then(async () => {
          await recallUserExpenseHistory({ id: row._id });
          this.getTableData();
        })
        .catch(() => {});
    },
    //----------------------------------兑换券订单列表--------------------------------------
    handleTabSwitch(item) {
      this.tableData = [];
      this.form = {
        // account: "",
        // id: "",
      };
      this.paging = {
        page: 1,
        pageSize: 10,
        total: 0,
      };
      if (item.name === "4" || item.name === "3") {
        this.getTableDataByOrder();
      } else if (item.name === "2") {
        this.getTableData();
      }
    },
    async getTableDataByOrder(value, type) {
      let params = {
        page:
          type === "page"
            ? value
              ? value
              : this.paging.page
            : this.paging.page,
        pageSize:
          type === "pageSize"
            ? value
              ? value
              : this.paging.pageSize
            : this.paging.pageSize,
      };
      params = Object.assign(
        {},
        params,
        { userId: this.$route.query.id },
        this.form
      );
      const {
        code,
        data: { total, currentPage, data, pageSize },
      } =
        this.activeTab === "3"
          ? await getVoucherOrderList(params)
          : await getOrderList(params);
      this.paging.total = total;
      this.paging.pageSize = pageSize;
      this.paging.page = currentPage;
      this.tableData = data;
    },
    handleSizeChange2(value) {
      this.getTableDataByOrder(value, "pageSize");
    },
    handleCurrentChange2(value) {
      this.getTableDataByOrder(value, "page");
    },
    // ---------------------------------用户收藏信息相关---------------------------------------
    // ---------------------------------用户购物车相关---------------------------------------
    // ---------------------------------用户地址相关---------------------------------------
  },
};
</script>

<style scoped>
.sum_up_label {
  font-size: 16px;
  margin-right: 20px;
  font-weight: bold;
}
</style>
